<template>
  <div>
    <div class="header">
      <span>珍 品 图 集</span>
    </div>

    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#e91e63"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1" @click="getAll(`/picture/all`)"
        >推荐</el-menu-item
      >
      <el-menu-item index="2"  @click="getAll(`/picture/all`)"
        >全部</el-menu-item
      >
      <el-menu-item
        :index="2+index"
        v-for="(type, index) in ptypes"
        :key="type.id"  @click="getAll(`/picture/type?type=`+type.id)"
        >{{ type.tname }}</el-menu-item
      >
    </el-menu>
  </div>
</template>

<script>
import axios from "@/axios";
import bus from "@/bus/index"
export default {
  name: "BHeader",
  data() {
    return {
      show: false,
      ptypes: [],
    };
  },
  methods: {
    // showDialog() {
    //   this.show = !this.show;
    // },

    //获取类型列表
    async getAllType() {
      let result = await axios("/ptype/all");
      this.ptypes = result.data;
    },

    getAll(url){
      bus.$emit("setData",url)
    }
  },
  mounted() {
    this.getAllType();
  },

};
</script>

<style scoped>
.el-menu {
  display: flex;
  justify-content: center;
}
.header {
  font-size: 1.875rem !important;
  font-weight: 700;

  background: linear-gradient(
      to right,
      rgba(236, 225, 255, 1),
      rgba(245, 241, 255, 0.5)
    ),
    url(@/assets/images/bj.jpg) center right 30% repeat; /* 标准的语法 */
}
</style>

